<template>
    <div>
        <div :class='$style.backTestSet'>
            设置： {{backTestSet.start_date}} 到 {{backTestSet.end_date}}， {{backTestSet.cash}}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;状态：<a-tag>{{backTestSet.status}}</a-tag><!-- <XBackTestStatus :status='backTestSet.status' /> -->
            <div class='m-l-30' style="width:200px">
                <a-progress size='small' status='active' :percent='progress' />
            </div>
        </div>
        </div>

        <div :class='$style.detailContainer'>
            <BackTestDetail type='single' :profitSummary='profitSummary' :transactionDetail='transactionDetail' :position='position' :strategyProfit='strategyProfit' :benchmarkProfit='benchmarkProfit' @change='selectedTap' />
        </div>

</template>

<script lang='ts' setup>
    import { useRoute } from 'vue-router'
    import BackTestDetail from '../BackTestDetail/index.vue'
    import { onBeforeUnmount, onMounted, reactive, ref } from 'vue'
    import { TRANS } from '@/constant'

    import { profitSummaryApi, backTestProcessApi, transactionDetailApi, positionApi, strategyProfitApi, benchmarkProfitApi } from '@/api/backTest'
import { message } from 'ant-design-vue'
    
    const route = useRoute()

    const sharesColumns:any[] = [
        {title : '股票名称', dataIndex : 'code_name', align : 'center'},
        {title : '策略名称', dataIndex : 'strategy_name', align : 'center'},
        {title : '参数', dataIndex : 'params', align : 'center'},
        {title : '进度', dataIndex : 'progress', align : 'center'},
    ]
    const sharesDataSource:any[] = []

    const taskId = route.params.id
    let timer = null
    const backTestSet = reactive({
        start_date : '---',
        end_date : '---',
        cash : '---',
        status : ''
    })


    const profitSummary = ref<any>(null)
    const transactionDetail = ref<any>(null)
    const position = ref<any>(null)
    const strategyProfit = ref<any>(null)
    const benchmarkProfit = ref<any>(null)


    let testStatus = 0

    const progress = ref(0) //进度
    

    function getProfitSummary() {
        profitSummaryApi({task_id : taskId}).then(res => {
            const data = res.data
            const profitSummaryTemp = {
                summary : [],
                chart : {
                    xAxis : [],
                    series : [[], []],

                }
            }

            if(!res.success) {
                profitSummary.value = profitSummaryTemp
                message.error(res.message)
                return
            }
            
            backTestSet.cash = data.cash
            backTestSet.status = data.status
            backTestSet.start_date = data.start_date
            backTestSet.end_date = data.end_date
            
            

            for(let k in data) {
                if(['benchmark_cum_returns', 'strategy_cum_returns', 'status', 'status_text'].includes(k)) continue
                profitSummaryTemp.summary.push({name : TRANS[k], value : data[k]})
            }

            for(let time in data.benchmark_cum_returns) {
                profitSummaryTemp.chart.series[0].push([time, data.benchmark_cum_returns[time]])
            } 

            for(let time in data.strategy_cum_returns) {
                profitSummaryTemp.chart.series[1].push([time, data.strategy_cum_returns[time]])
            } 

            profitSummaryTemp.chart.xAxis.push(...Object.keys(data.strategy_cum_returns))

            profitSummary.value = profitSummaryTemp

        })
    }

    

    async function selectedTap(key) {
        if(testStatus != 1) return

        if(key == 2) {
            if(transactionDetail.value == null) {
                const res = await transactionDetailApi({task_id : taskId})
                if(!res.success) {
                    transactionDetail.value = []
                    message.error(res.message)
                    return
                }
                transactionDetail.value = res.data || []
            }
        }else if(key == 3) {
            if(position.value == null) {
                const res = await positionApi({task_id : taskId})
                if(!res.success) {
                    position.value = []
                    message.error(res.message)
                    return
                }
                position.value = res.data || []
            }
        }else if(key == 4) {
            if(strategyProfit.value == null) {
                const res = await strategyProfitApi({task_id : taskId})
                if(!res.success) {
                    strategyProfit.value = []
                    message.error(res.message)
                    return
                }
                strategyProfit.value = res.data || []
            }
        }else if(key == 5) {
            if(benchmarkProfit.value == null) {
                const res = await benchmarkProfitApi({task_id : taskId})
                if(!res.success) {
                    benchmarkProfit.value = []
                    message.error(res.message)
                    return
                }
                benchmarkProfit.value = res.data || []
            }
        }
    }

    timer = setInterval(() => {
        backTestProcessApi({task_id : taskId}).then(data => {
            if(data.run_status == 5) {
                clearInterval(timer)
                testStatus = 1
                getProfitSummary()
            }
            progress.value = data.run_status * 20
        })
    }, 1000)

    onBeforeUnmount(() => {
        clearInterval(timer)
    })

    

</script>


<style lang='scss' module>
    .backTestSet{
        padding:0 $space $space $space;
        font-size: 14px;
        display: flex;
        align-items: center;
    }

    .detailContainer{
        //border-top: 1px solid #f0f0f0;
    }

    .shares{
        text-align: center;
        padding: 0 $space 0 $space;
        :global(.ant-descriptions-item-label) {
            text-align: center;
        }
    }
    .param {
        text-align: center;
        display: inline-flex;
        gap: 10px;
        .paramName{
            font-size: 12px;
            color: #8c8c8c;
        }
        .paramValue{
            font-size: 14px;
            font-weight: 700;
            color: #666;
        }
    }
    
</style>